<template>
  <section :class="sectionClass">
    <div v-if="title || $slots.title" class="axiom-section__header">
      <slot name="title">
        <axiom-title
          v-if="title"
          :title="title"
          :level="titleLevel"
          :type="titleType"
          :description="description"
        />
      </slot>
    </div>
    
    <div class="axiom-section__content">
      <slot />
    </div>
  </section>
</template>

<script>
import { computed } from 'vue';
import AxiomTitle from './AxiomTitle.vue';
// import { GlobalUtilsMixin } from '@/utils/globalUtils';

export default {
  name: 'AxiomSection',
  components: {
    AxiomTitle,
  },
  // mixins: [GlobalUtilsMixin],
  props: {
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    titleLevel: {
      type: [String, Number],
      default: 3,
      validator: value => ['1', '2', '3', '4', '5', '6', 1, 2, 3, 4, 5, 6].includes(value)
    },
    titleType: {
      type: String,
      default: 'section',
      validator: value => ['page', 'section', 'component'].includes(value)
    },
    spacing: {
      type: String,
      default: 'normal',
      validator: value => ['none', 'small', 'normal', 'large', 'xlarge'].includes(value)
    }
  },
  computed: {
    sectionClass() {
      return [
        'axiom-section',
        `axiom-section--spacing-${this.spacing}`
      ];
    }
  },
  created() {
    // this.$logger.debug('AxiomSection 组件初始化', {
    //   title: this.title,
    //   titleLevel: this.titleLevel,
    //   spacing: this.spacing
    // });
  }
}
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-section';
</style> 